<template>
  <div class="containersss">
    <div class="content">
      <div class="content-list">
        <div class="big" v-for="(item, index) in data" :key="index">
          <span class="label">{{ $t(item.title) }}：</span>
          <div class="one">
            <el-checkbox
              :indeterminate="item.isIndeterminate"
              v-model="item.isCheck"
              @change="checkTitle(item.isCheck, index)"
              >{{ $t("select_all") }}</el-checkbox
            >
            <el-checkbox-group
              v-model="item.checkedData"
              @change="checkItem(item.checkedData, index)"
            >
              <el-checkbox
                v-for="(a, index) in item.children"
                :label="a.value"
                :key="index"
                >{{ $t(a.label) }}</el-checkbox
              >
            </el-checkbox-group>
          </div>
        </div>
      </div>
    </div>
    <div
      slot="footer"
      class="dialog-footer"
      style="
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-bottom: 40px;
      "
    >
      <el-button :loading="loading" type="primary" @click="submitExport">{{
        $t("confirm")
      }}</el-button>
    </div>
  </div>
</template>

<script>
import {
  employeefieldconfig,
  employeefieldconfigInfo,
} from "@/api/custom/employerList.js";
export default {
  data() {
    return {
      loading: false,
      data: [
        {
          title: "personal_information",
          isCheck: false,
          isIndeterminate: true,
          checkedData: [],
          value: "1",
          children: [
            // 基本信息
            {
              value: "avatar",
              label: "profie_picture",
            },
            {
              value: "employeeName",
              label: "display_name",
            },
            {
              value: "employeeCode",
              label: "employee_code",
            },
            {
              value: "chineseName",
              label: "chinese_name",
            },
            {
              value: "familyNameCn",
              label: "surname",
            },
            {
              value: "nameCn",
              label: "given_name",
            },

            {
              value: "englishName",
              label: "english_name",
            },
            {
              value: "familyNameEn",
              label: "surname_en",
            },
            {
              value: "middleName",
              label: "middle_name",
            },
            {
              value: "nameEn",
              label: "given_name_en",
            },
            {
              value: "alias",
              label: "alias",
            },
            {
              value: "phone",
              label: "mobile_number",
            },
            {
              value: "phoneHome",
              label: "residential_phone_number",
            },
            {
              value: "phoneOffice",
              label: "office_phone_number",
            },
            {
              value: "email",
              label: "personal_email",
            },
            {
              value: "emailCompany",
              label: "company_email",
            },
            {
              value: "sex",
              label: "gender",
            },
            {
              value: "birthday",
              label: "date_of_birth",
            },
            {
              value: "maritalStatus",
              label: "marital_status",
            },
            {
              value: "cardNo",
              label: "identity_card_number",
            },
            {
              value: "issuingCountry",
              label: "identity_card_issuance_country",
            },
            {
              value: "otherDocumentTypes",
              label: "other_identity_document_type",
            },
            {
              value: "otherDocumentNo",
              label: "other_identity_document_numbers",
            },
            {
              value: "passportNumber",
              label: "passport_number",
            },
            {
              value: "passportCountry",
              label: "issuing_country",
            },
            {
              value: "passportExpirationDate",
              label: "passport_expiration_date",
            },
            {
              value: "birthPlace",
              label: "place_of_birth",
            },
            {
              value: "nationality",
              label: "nationality",
            },
            {
              value: "domicile",
              label: "hukou",
            },
            {
              value: "relationship",
              label: "cpc_ccyl",
            },
            {
              value: "socialSecurityNo",
              label: "social_insurance_userid",
            },
            {
              value: "providentFundNo",
              label: "housing_provident_fund_userid",
            },
            {
              value: "addressResidential",
              label: "residential_address",
            },
            {
              value: "addressCorrespondence",
              label: "mailing_address",
            },
            {
              value: "remark",
              label: "remarks",
            },
          ],
        },
        {
          title: "emergency_contact_perosns",
          isCheck: false,
          isIndeterminate: true,
          checkedData: [],
          value: "1",
          children: [
            {
              value: "emergencyContactName",
              label: "name",
            },
            {
              value: "emergencyContactRelation",
              label: "relationship",
            },
            {
              value: "emergencyContactPhone",
              label: "mobile_number",
            },
            {
              value: "emergency_contact_remark",
              label: "remarks",
            },
          ],
        },
        {
          title: "experience",
          isCheck: false,
          isIndeterminate: true,
          checkedData: [],
          value: "1",
          children: [
            {
              value: "type",
              label: "type",
            },
            {
              value: "startTime",
              label: "start_date",
            },
            {
              value: "endTime",
              label: "ending_date",
            },
            {
              value: "content",
              label: "content",
            },
          ],
        },

        {
          title: "bank_information",
          isCheck: false,
          isIndeterminate: true,
          checkedData: [],
          value: "1",
          children: [
            {
              value: "bankAccount",
              label: "bank_account_number",
            },
            {
              value: "accountHolder",
              label: "bank_account_holder",
            },
            {
              value: "bankCode",
              label: "bank_code",
            },
            {
              value: "branchCode",
              label: "branch_code",
            },
            {
              value: "openingBank",
              label: "bank_name_of_opening_account",
            },
            {
              value: "defaultAccount",
              label: "permission_of_default_bank_account",
            },
          ],
        },

        {
          title: "employment_information",
          isCheck: false,
          isIndeterminate: true,
          checkedData: [],
          value: "1",
          children: [
            {
              value: "employmentForm",
              label: "employment_type",
            },
            {
              value: "workNo",
              label: "employee_number",
            },
            {
              value: "employeeStatus",
              label: "employee_status",
            },
            {
              value: "entryDate",
              label: "date_of_hire",
            },
            {
              value: "probationPeriod",
              label: "probation_period",
            },
            {
              value: "confirmationDate",
              label: "permanent_employment",
            },
            {
              value: "separationDate",
              label: "resignation_date",
            },
            {
              value: "seniority",
              label: "seniority",
            },
            {
              value: "employerId",
              label: "employing_company",
            },
            {
              value: "position",
              label: "position",
            },
            {
              value: "empClass",
              label: "rank",
            },
            {
              value: "division",
              label: "division",
            },
            {
              value: "department",
              label: "department",
            },
            {
              value: "branch",
              label: "branch",
            },
            {
              value: "team",
              label: "team",
            },
            {
              value: "immediateSupervisor",
              label: "immediate_supervisor",
            },
            {
              value: "region",
              label: "region",
            },
            {
              value: "costCenter",
              label: "cost_center",
            },
            {
              value: "professional",
              label: "national_professional_title",
            },
            {
              value: "firstTimeWork",
              label: "date_of_first_employment",
            },
            {
              value: "legalSeniority",
              label: "mainland_china",
            },
          ],
        },
      ],
      // 接收数据
      acceptInfo: [],
      accobj: [],
    };
  },
  created() {
    this.gethui();
  },
  methods: {
    checkItem(val, index) {
      let checkedCount = val.length;
      this.data[index].isCheck =
        checkedCount === this.data[index].children.length;
      this.data[index].isIndeterminate =
        checkedCount > 0 && checkedCount < this.data[index].children.length;
    },

    checkTitle(val, index) {
      let arr = [];
      const re = this.data[index].children;
      //全选
      if (val) {
        for (let i = 0; i < re.length; i++) {
          arr[i] = re[i]["value"];
        }
      }
      this.data[index].checkedData = arr;
      this.data[index].isIndeterminate = false;
    },
    submitExport() {
      let selectData = [];
      this.data.map((item) => {
        selectData = [...selectData, ...item.checkedData];
      });
      let data = Object.create(null);
      selectData.map((item) => {
        data[item] = true;
      });
      employeefieldconfig({
        fieldConfig: JSON.stringify(data),
        fieldOwn: JSON.stringify(this.data),
      }).then((res) => {
        if (res.code == 200) {
          this.$message.success(res.msg);
          this.gethui();
        }
      });
    },

    gethui() {
      employeefieldconfigInfo().then((res) => {
        console.log("🐛 ~ employeefieldconfigInfo ~ res:", res)
        if (res.code == 200 && res.data) {
          this.data = JSON.parse(res.data.fieldOwn);
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.containersss {
  width: 100%;

  .content {
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 30px;

    &-list {
      max-width: 70%;
      display: flex;
      flex-flow: column;
      .big {
        display: flex;
        .label {
          display: flex;
          white-space: nowrap;
        }

        .one {
          margin-bottom: 20px;
        }
      }
    }
  }

  .dialog-footer {
    width: 100%;
    margin-top: 200px;
  }
}
</style>
